import { Button,message} from 'antd';
import chelist from "../../mobx/chelist"
import {Tag} from "antd"
import "./index.scss"
import moment from "moment"
import React, { Component } from 'react';
import { ajax } from '../../api';
import { sexList } from '../../utils';


export default class Gong extends Component {

    state={
        data:{},
        a:"",
        list:[]
    }

    componentDidMount(){
        var qqq = new URLSearchParams(this.props.location.search).get("aid")
        ajax.getanpai({
            aid:qqq
        })
        .then(res=>{
            if(res.code==200){
                    this.setState({
                    data:res.result,          
                })   
                if(res.result){
                    this.setState({
                        a:res.result.fangshi,
                        list:res.result.peijian
                    })
                }          
            }
        })
    }

      //导出Excel
      donwloadExcel=(table,name)=>{
        if(1>0){

            var uri = "data:application/vnd.ms-excel;base64,",
            template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>',
            base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))) },
            format = function (s, c) { return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; }) };

            if(!table.nodeType) table =document.getElementById(table)
            var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML}

            var filename ="员工信息"+moment().format("L")+".xls";
            document.getElementById("dlink").href = uri + base64(format(template, ctx));
            document.getElementById("dlink").download = filename;
            document.getElementById("dlink").click();
        }else{
            message.error("请等待数据载入后再导出")
        }
    }

    render() {
        const {data,a,list}=this.state
        return (
            <div className="biao">
                <a id="dlink" style={{display:'none'}}></a>
                {/* <Button type="danger"  >打印故障单</Button>   */}
                <Button type="primary" onClick={()=>this.donwloadExcel('mytable','故障单')}>打印故障单</Button>
                <table id="mytable" style={{marginTop:50,width:900}}>
                    <thead>
                    <tr>
                        <td colSpan="6" style={{textAlign:"center"}}>
                        <h3 style={{textAlign:"center",color:"#f00",fontSize:30,fontWeight:600}}>车辆故障单</h3>
                        </td>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>
                            车辆类型
                        </td>
                        <td>
                            {data?data.leixing:""}
                        </td>
                        <td>
                            车牌号
                        </td>
                        <td>
                            {data?data.chepai:""}
                        </td>
                        <td>
                            进店时间
                        </td>
                        <td>
                            {data?(moment(data.time).format("YYYY-MM-DD HH:mm:ss")):""}
                        </td>
                    </tr>
                    <tr>
                        <td>
                        车辆问题
                        </td>
                        <td colSpan="5">
                            {data?data.wenti:""}   
                        </td>
                    </tr>
                    <tr>
                        <td>
                        需要维修方式
                        </td>
                        <td colSpan="5">
                            {a?sexList[a].name:""}
                        </td>
                    </tr>
                    <tr>
                        <td>
                        需要更换配件
                        </td>
                        <td colSpan="5">
                            {
                                 data?<div>
                                 {
                                     list.map((item,i)=>{
                                         return  (<Tag key={i}> { item }</Tag>)
                                       })
                                 }
                             </div>:""
                            }
                            
                        </td>
                    </tr>
                    </tbody>
                    <tfoot>
                    <tr>
                        <td >
                        维修金额
                        </td>
                        <td>
                            {data?(data.money+"元"):""}
                        </td>
                        <td >
                        维修工签字
                        </td>
                        <td>
                            
                        </td>
                        <td >
                        顾客签字
                        </td>
                        <td>
                            
                        </td>
                    </tr>
                    <tr  >
                        <td style={{textAlign:"left",border:"none"}} colSpan="3">
                            <p style={{marginTop:-50}}>救援电话：018-8888888 </p>
                            <p >公司地址：天勤市-富贵路-德添汽车维修4S店</p>
                        </td>
                        
                        <td style={{textAlign:"left",border:"none"}} colSpan="3"  >
                            <p>
                            备注：
                            </p>
                            <p style={{paddingLeft:40}}>
                                1、汽车大修、发动机总成大修的质量保证为三个月。
                            </p>
                            <p style={{paddingLeft:40}}>2、其他中长大修的质量保证为一个月</p>
                            <p style={{paddingLeft:40}}>3、汽车小修的质量保证为一星期。</p>
                            <p style={{paddingLeft:40}}>4、以上质量保证，因人为因素造成,拒绝质保。</p>
                        </td>
                    </tr>
                    </tfoot>
                    
                </table>
            
            </div>
        );
    }
}

